<!-- 保养记录 -->
<template>
  <!-- <card class="insure-card" :headerStyle="{ display: 'none' }" :showDivider="false" style="margin-bottom: 20px">
    <table-index class="insure-card-table" :table="tableCompulsory" @loadData="loadCompulsoryData">
      <template #maintenanceItems="{ record }">
        <div v-if="record.maintenanceItemNames != null">
          <template v-if="record.maintenanceItemNames && record.maintenanceItemNames.length > 0">
            <more-popup :list="record.maintenanceItemNames" />
          </template>
        </div>
      </template>
    </table-index>
  </card> -->
  <card class="insure-card" title="维修记录" :showDivider="false">
    <table-index class="insure-card-table" :table="tableCompulsoryRepair" @loadData="loadCompulsoryDataRepair">
      <template #repairItems="{ record }">
        <div v-if="record.repairItemNames != null">
          <template v-if="record.repairItemNames && record.repairItemNames.length > 0">
            <more-popup :list="record.repairItemNames" />
          </template>
        </div>
      </template>
      <template #bindOrder="{ record }">
        <div v-if="record.orderNo">
          {{ record.orderNo }}
          <div>交车人：{{ record.giveStaffName || '-' }}</div>
        </div>
        <div v-else>-</div>
      </template>
    </table-index>
  </card>
</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  // import { carMaintenanceFindDetail } from '@/api/asset/car'
  import { carRepairFindDetail } from '@/api/asset/car'

  import { useRoute } from 'vue-router'
  const route = useRoute()
  const routePrams = route.params
  const carId = ref(null)

  onMounted(() => {
    console.log('routePrams.id', routePrams.id)
    carId.value = routePrams.id
    // loadCompulsoryData()
    loadCompulsoryDataRepair()
  })

  // const loadCompulsoryData = () => {
  //   const param = {
  //     carId: Number(carId.value),
  //   }
  //   const fn = useFetchTableDataApi(tableCompulsory, param, carMaintenanceFindDetail)
  //   fn().then((result) => {
  //     console.log(result, 'result')
  //     var data = result.data
  //     tableCompulsory.dataList = data
  //   })
  // }
  // table 配置
  // const tableCompulsory = useTable({
  //   columns: [
  //     { title: '保养单关联门店', dataIndex: 'siteName', fixed: 'left' },
  //     { title: '保养单号', dataIndex: 'maintenanceNo' },
  //     { title: '修理厂', dataIndex: 'maintenanceShop', width: 100 },
  //     { title: '入厂日期', dataIndex: 'entranceDate', width: 170 },
  //     { title: '出厂日期', dataIndex: 'exportDate', width: 170 },
  //     { title: '上一次保养里程', dataIndex: 'lastTimeKilometre', unit: '公里', width: 130 },
  //     { title: '本次保养里程', dataIndex: 'entranceKilometre', unit: '公里', width: 120 },
  //     { title: '保养项目', dataIndex: 'maintenanceItemNames', slotName: 'maintenanceItems', width: 130 },
  //     { title: '保养费用总计', dataIndex: 'totalAmount', unit: '元', width: 220 },
  //     { title: '保养状态', dataIndex: 'statusStr', width: 100 },
  //     { title: '负责人', dataIndex: 'undertaker', width: 100 },
  //   ],
  // })

  // table 配置
  const tableCompulsoryRepair = useTable({
    columns: [
      { title: '维修单关联门店', dataIndex: 'siteName', width: 140, fixed: 'left' },
      { title: '维修单号', dataIndex: 'repairNo', width: 140 },
      { title: '修理厂', dataIndex: 'repairShop', width: 100 },
      { title: '入厂日期', dataIndex: 'arrivalTime', width: 180 },
      { title: '出厂日期', dataIndex: 'leaveTime', width: 180 },
      { title: '入厂里程', dataIndex: 'entranceKilometre', unit: '公里', width: 140 },
      { title: '出厂里程', dataIndex: 'exportKilometre', unit: '公里', width: 140 },
      { title: '关联单号', dataIndex: 'order', slotName: 'bindOrder', width: 240 },
      { title: '维修项目', dataIndex: 'repairItemNames', slotName: 'repairItems', width: 130 },
      { title: '费用总计', dataIndex: 'repairAmount', unit: '元', width: 110 },
      { title: '维修状态', dataIndex: 'statusStr', width: 90 },
      // { title: '结算状态', dataIndex: 'insureStatusStr', width: 120 },
      { title: '负责人', dataIndex: 'undertaker', width: 100 },
    ],
  })

  const loadCompulsoryDataRepair = () => {
    const param = {
      withDetail: true,
      carId: Number(carId.value),
    }
    const fn = useFetchTableDataApi(tableCompulsoryRepair, param, carRepairFindDetail)
    fn().then((result) => {
      var data = result.data
      data.forEach((e) => {
        if (e.repairItemNames) {
          e.repairItemNames = e.repairItemNames.split(',')
        }
      })
      tableCompulsoryRepair.dataList = data
    })
  }
</script>
<style lang="less" scoped></style>
